Extract color input UI into reusable ColorInput component - #440

Walkthrough

Introduces a new reusable ColorInput Svelte component that combines a color swatch, conditional native color picker, and free-form text editing with override/reset support. All six configurator panels (BordersPanel, ColorsPanel, EffectsPanel, MiscPanel, ShadowsPanel, and TokenRow) replace their inline color picker markup with this component.

Changes

ColorInput Component and Panel Adoption

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• codeslash-dev/SLASHED#429: Also modifies ColorsPanel.svelte to use preview-resolved colors via resolveColor/previewVersion, which is the same resolution mechanism now used inside ColorInput and TokenRow.

Suggested labels

codex

• X
• Mastodon
• Reddit
• LinkedIn

• Introduce a reusable ColorInput for swatch + text editing + reset behavior.
• Replace duplicated  patterns across configurator panels.
• Resolve swatch colors via preview resolver so CSS-variable tokens render correctly.

graph TD
  P["Configurator panels"] --> CI["ColorInput (Svelte)"] --> PR["previewResolver"] --> IF{{"Preview iframe"}}
  TR["TokenRow"] --> PR
  subgraph Legend
    direction LR
    _c["Component"] ~~~ _e{{"External"}}
  end

Loading

The following are alternative approaches to this PR:

1. Use a dedicated color picker library (supports CSS vars)

• ➕ Native support for richer parsing (hex/rgb/hsl/var()) and alpha controls
• ➕ More consistent UX across browsers than
• ➖ Adds dependency weight and maintenance surface area
• ➖ Harder to keep styling aligned with the existing compact configurator UI

2. Keep native and add a separate 'var()' toggle

• ➕ Minimal new component logic
• ➕ Keeps existing behavior nearly unchanged
• ➖ UX becomes inconsistent across panels unless all adopt the same toggle pattern
• ➖ Still leaves duplicated boilerplate (swatch, label, reset, resolution) in each panel

Recommendation: Proceed with the current approach: a single ColorInput consolidates the repeated UI patterns and centralizes the tricky parts (preview-based resolution and CSS-variable handling) without introducing new dependencies. The chosen design keeps the native picker for concrete colors while gracefully falling back to text entry for var(...) values, which matches platform constraints.

Enhancement (1) +89 / -0

ColorInput.svelteAdd reusable ColorInput with preview-resolved swatch + inline editing +89/-0

Add reusable ColorInput with preview-resolved swatch + inline editing

• Introduces a shared color input component that shows a resolved swatch, supports inline text editing, and offers reset for overridden values. Disables the native color picker when the value is a CSS variable reference and seeds the picker by converting resolved rgb(...) to hex.

configurator/src/components/inputs/ColorInput.svelte

Bug fix (1) +8 / -1

TokenRow.svelteFix token swatch painting via preview-based resolveColor +8/-1

Fix token swatch painting via preview-based resolveColor

• Updates the color swatch rendering to resolve token expressions through the preview resolver, including a fallback to var(token.name). This improves swatch accuracy for tokens whose values rely on CSS variables outside the configurator DOM scope.

configurator/src/components/inputs/TokenRow.svelte

Refactor (5) +91 / -127

BordersPanel.svelteReplace border/divider/focus ring color pickers with ColorInput +23/-30

Replace border/divider/focus ring color pickers with ColorInput

• Refactors border-related color overrides to use ColorInput, standardizing swatch behavior, placeholder text, and reset handling. Removes duplicated native color input markup for border color, divider color, and focus ring color.

configurator/src/components/panels/BordersPanel.svelte

ColorsPanel.svelteUse ColorInput for semantic swatch overrides +9/-17

Use ColorInput for semantic swatch overrides

• Replaces the per-swatch inline color-picker UI with ColorInput. Preserves the existing resolved/auto-derived display by passing a computed placeholder string into the shared component.

configurator/src/components/panels/ColorsPanel.svelte

EffectsPanel.svelteStandardize scrim and scrollbar colors via ColorInput +17/-20

Standardize scrim and scrollbar colors via ColorInput

• Migrates scrim and scrollbar thumb/track color controls to ColorInput, removing per-row default-seeding logic in favor of shared resolution and display behavior. Keeps existing override/reset semantics via component callbacks.

configurator/src/components/panels/EffectsPanel.svelte

MiscPanel.svelteRefactor selection and caret color controls to ColorInput +25/-36

Refactor selection and caret color controls to ColorInput

• Replaces selection background/text and caret color picker blocks with the shared ColorInput component. This unifies placeholder display and reset behavior while supporting CSS variable entry where needed.

configurator/src/components/panels/MiscPanel.svelte

ShadowsPanel.svelteMove shadow and glow color editing to ColorInput +17/-24

Move shadow and glow color editing to ColorInput

• Refactors shadow color and glow color controls to use ColorInput. Removes duplicated swatch/value/reset UI while retaining the existing descriptive placeholders.

configurator/src/components/panels/ShadowsPanel.svelte

Description

ColorInput treats values starting with "--" as CSS variable references but forwards them unchanged
to onSet and resolveColor, so an entered "--sf-color-…" gets serialized as a literal string and
becomes an invalid color at runtime. This makes saved/imported overrides unusable and prevents
correct swatch resolution for that shorthand.

Code

configurator/src/components/inputs/ColorInput.svelte[R22-64]

+  function paint(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || expr || "transparent";
+  }
+
+  let swatchColor = $derived(paint(value || `var(${token})`));
+
+  // Detect if the current value is a CSS variable reference (can't use native picker)
+  let isVar = $derived(value.trim().startsWith("var(") || value.trim().startsWith("--"));
+
+  // Convert rgb(...) string to hex for native picker seed
+  function toHex(rgb: string): string {
+    const m = rgb.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (!m) return "#6366f1";
+    return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+  }
+</script>
+
+<div class="flex items-center gap-2">
+  <!-- Swatch / native picker trigger -->
+  <div class="relative shrink-0 w-7 h-7 rounded border border-white/10 overflow-hidden cursor-pointer">
+    <div class="absolute inset-0" style={`background: ${swatchColor}`}></div>
+    {#if !isVar}
+      <input
+        type="color"
+        value={toHex(swatchColor)}
+        oninput={(e) => onSet((e.target as HTMLInputElement).value)}
+        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+        tabindex="-1"
+      />
+    {/if}
+  </div>
+
+  <!-- Text display / editable input -->
+  {#if editing}
+    <input
+      value={value}
+      autofocus
+      onblur={(e) => {
+        const v = (e.target as HTMLInputElement).value.trim();
+        if (!v) onReset();
+        else onSet(v);
+        editing = false;

Relevance

⭐⭐ Medium

No close historical precedent on supporting bare "--token" as var(); team fixes correctness, but
evidence is indirect.

PR-#434
PR-#429

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

ColorInput explicitly treats --* as a variable reference but does not wrap it in var(...) when
setting/saving or resolving, while the override CSS generator writes values verbatim into `:root {
--name: value; }. This combination makes bare --token` values invalid color overrides and
unresolvable by the preview probe.

configurator/src/components/inputs/ColorInput.svelte[22-65]
configurator/src/lib/codec.ts[187-204]
configurator/src/components/shell/PreviewPanel.svelte[463-567]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`ColorInput` claims to support CSS variable references entered as either `var(--token)` or bare `--token`, but the bare form is currently stored and resolved as-is. Persisting `--token` produces override CSS like `--sf-some-color: --sf-other-color;`, which is not a valid color value when later consumed via `var(--sf-some-color)`.

### Issue Context
- `ColorInput` explicitly detects `--*` as a var reference (`isVar`), but `paint()` and the `onblur` handler pass the raw string through unchanged.
- Overrides are emitted verbatim into `:root { --token: <value>; }`, so the invalid value is persisted into the preview iframe and export output.

### Fix Focus Areas
- configurator/src/components/inputs/ColorInput.svelte[22-65]
- configurator/src/lib/codec.ts[187-204]

### Implementation guidance
- In `ColorInput`, introduce a small normalization helper:
 - If trimmed input starts with `--`, convert to `var(${trimmed})`.
 - If it already starts with `var(`, keep as-is.
- Apply normalization in both places:
 - In `paint(expr)` (or before calling it) so the swatch preview resolves correctly.
 - In the `onblur` path before calling `onSet(v)` so persisted overrides are valid.
- Add a couple of inline comments clarifying that bare `--token` is a UI shorthand that is normalized before storage.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

TokenRow now computes swatchColor via resolveColor() for every token row even when the token isn’t a
color, creating extra work and making all rows depend on previewVersion bumps. In large token lists,
this adds avoidable recomputation on every preview update despite swatchColor only being rendered
for color tokens.

Code

configurator/src/components/inputs/TokenRow.svelte[R26-32]

+  function paintSwatch(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || resolveColor(`var(${token.name})`) || expr;
+  }
+  let swatchColor = $derived(paintSwatch(displayValue));
  let type = $derived(guessType(token));
  let shortName = $derived(token.name.replace("--sf-", ""));

Relevance

⭐⭐⭐ High

Performance work around previewVersion/resolveColor recomputation is commonly accepted (caching and
gated effects in PRs #430/#433).

PR-#430
PR-#433

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

TokenRow defines swatchColor using paintSwatch() before any type-based rendering branch;
paintSwatch() reads previewVersion and calls resolveColor(), and AllTokensTab instantiates TokenRow
for every token in the list (many of which are non-color).

configurator/src/components/inputs/TokenRow.svelte[23-33]
configurator/src/components/panels/AllTokensTab.svelte[115-129]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`swatchColor = $derived(paintSwatch(displayValue))` runs for every `TokenRow`, even when the token isn’t a color. `paintSwatch()` reads `previewVersion.value` and calls `resolveColor()`, so non-color rows unnecessarily subscribe to preview bumps and do extra work.

### Issue Context
`AllTokensTab` renders `TokenRow` for all tokens in the filtered list, so this overhead scales with token count.

### Fix Focus Areas
- configurator/src/components/inputs/TokenRow.svelte[14-33]
- configurator/src/components/panels/AllTokensTab.svelte[115-129]

### Implementation guidance
- Compute `type` first, then gate swatch resolution:
 - `let swatchColor = $derived(type === "color" ? paintSwatch(displayValue) : "");`
- Alternatively, move the `previewVersion` read and `resolveColor()` calls behind a `type === "color"` guard so non-color rows don’t subscribe to previewVersion at all.
- Keep behavior unchanged for color tokens.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

When resolveColor() returns an empty string (before the preview iframe is registered), ColorInput
falls back to the raw expression and toHex() then returns a hard-coded "#6366f1" for any non-rgb()
string (including valid hex). This causes the native color picker to open at an unrelated color even
when an override is already set.

Code

configurator/src/components/inputs/ColorInput.svelte[R22-37]

+  function paint(expr: string): string {
+    void previewVersion.value;
+    return resolveColor(expr) || expr || "transparent";
+  }
+
+  let swatchColor = $derived(paint(value || `var(${token})`));
+
+  // Detect if the current value is a CSS variable reference (can't use native picker)
+  let isVar = $derived(value.trim().startsWith("var(") || value.trim().startsWith("--"));
+
+  // Convert rgb(...) string to hex for native picker seed
+  function toHex(rgb: string): string {
+    const m = rgb.match(/rgb\w*\((\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+    if (!m) return "#6366f1";
+    return "#" + [m[1], m[2], m[3]].map(n => parseInt(n).toString(16).padStart(2, "0")).join("");
+  }

Relevance

⭐⭐⭐ High

Team previously accepted resolveColor("" ) fallback fixes to avoid wrong swatches before preview is
ready (see PR #434).

PR-#434

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

ColorInput’s paint() returns the original expression when resolveColor() yields ""; resolveColor()
explicitly returns "" when no preview doc exists yet; toHex() then fails to parse hex/non-rgb
expressions and returns a hard-coded fallback.

configurator/src/components/inputs/ColorInput.svelte[22-37]
configurator/src/lib/previewResolver.svelte.ts[91-109]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`toHex()` only understands computed `rgb(...)`/`rgba(...)` strings. When the preview resolver is unavailable, `paint()` returns the raw input expression (often a hex string), which causes `toHex()` to return the default `#6366f1` and mis-seed the native `<input type="color">`.

### Issue Context
`resolveColor()` returns `""` until the preview document is registered, so this behavior happens on initial load / iframe reload windows.

### Fix Focus Areas
- configurator/src/components/inputs/ColorInput.svelte[22-37]
- configurator/src/lib/previewResolver.svelte.ts[91-109]

### Implementation guidance
- Extend `toHex()` to:
 - Return the input directly if it already matches `#RRGGBB` (and optionally expand `#RGB` to `#RRGGBB`).
 - Otherwise, keep the current `rgb(...)` parsing.
 - Only fall back to the default when the string is neither hex nor rgb/rgba.
- Consider special-casing `transparent`/`rgba(..., 0)` to a reasonable seed (since native pickers can’t represent alpha), but keep it simple if you prefer.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools